<template>
  <div class="container">
    <div class="list"  @click="toDetail(item.teaCode)" v-for="(item,index) in list" :key="index">
      <img :src="item.image_file" class="">
      <div class="mask">
        {{item.adderss}}
        <div class="info">
          <div class="time">营业时间：{{item.business_hours}}</div>
          <div class="distance">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import API from '../api/api';
export default {
  data(){
    return {
      list:'',
      code:'',
      openid:'',
      ssopenid:''
    }
  },
  beforeCreate(){
    this.$http.get(this.AUTH+API.getCodeUrl).then(res=>{})
  },
  mounted(){
    var that = this;
    var url = that.HOST + API.getTeaHouseUrl;
    that.$http.post(url).then(res=>{
      console.log('teainfo',res.data)
      that.list = res.data
    })
    this.getCurrentUrl();
    this.getOpenid();
  },
  methods:{
    toDetail(e){
      if(e == undefined || e == 'undefined' ||
          e == '' || e == null || e == 'null'){
          this.$message({
            message: '茶室正在装修中！',
            type: 'warning'
          });
          return;
      }
      this.$router.push({path:'/detail',query:{id:e}})
    },
    getCurrentUrl:function(){
      this.code = window.location.search.replace('?code=','').replace('&state=123','');
    },
    getToken:function(){
      console.log('enter getToken')
    },
    getOpenid:function(){
      var url = this.HOST + API.getOpenidUrl;
      this.$http.post(url+'?code='+this.code).then(res=>{
        console.log(res.data)
        this.openid = res.data.dataMap.openid
        if(!sessionStorage.getItem('openid') || sessionStorage.getItem('openid') == null || sessionStorage.getItem('openid') == undefined){
          sessionStorage.setItem('openid',this.openid)
        }
        this.ssopenid = sessionStorage.getItem('openid')
      })
    }
  }
}
</script>
<style scoped>
  .container{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(243, 244, 246);
    font-size: 13px;
  }
  .list{
    text-align: center;
    padding-top: 10px;
    position: relative;
    width: 96%;
    margin: 0 2%;
  }
  .list img{
    width: 100%;
    border-radius: 15px;
    vertical-align: top;
  }
  .mask{
    background: rgba(0, 0, 0, .3);
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 60px;
    color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: left;
    padding: 3px 17px;
    box-sizing: border-box;
    font-weight: 800;
    padding-top: 8px;
  }
  .info{
    display: flex;
    justify-content: space-between;
    font-weight: normal;
    margin-top: 3px;
  }
</style>
